<!-- 
在 Vue 3 中，Hooks 是指一组可以在组合 API 中使用的函数，用于处理组件的生命周期、状态管理、响应式数据等。
  1.  `setup` 
  - 概述： `setup`  是每个 Vue 组件的入口点，在组件实例创建之前调用。它用于初始化组件的状态、计算属性和方法。
  - 返回值：可以返回一个对象，包含组件的响应式数据、计算属性和方法。

  2. 生命周期 Hooks
  在  `setup`  中，可以使用以下生命周期 Hooks：

   1.  `onBeforeMount` 
  - 调用时机：组件挂载之前。
  - 用途：适合进行一些准备工作，例如获取数据。

   2.  `onMounted` 
  - 调用时机：组件挂载到 DOM 之后。
  - 用途：可以在此阶段进行与 DOM 相关的操作，如初始化第三方库。

   3.  `onBeforeUpdate` 
  - 调用时机：组件更新之前。
  - 用途：可以在数据变化导致视图更新之前进行一些操作。

   4.  `onUpdated` 
  - 调用时机：组件更新后，DOM 重新渲染完成。
  - 用途：可以在视图更新后进行操作。

   5.  `onBeforeUnmount` 
  - 调用时机：组件实例被销毁之前。
  - 用途：可以进行清理工作，例如移除事件监听器。

   6.  `onUnmounted` 
  - 调用时机：组件实例被销毁后。
  - 用途：可以执行一些清理操作，确保没有内存泄漏。

  3. 响应式 Hooks
   1.  `ref` 
  - 概述：用于创建一个响应式引用，可以存储基本数据类型或对象。
  - 用法：通过  `.value`  属性访问和修改值。
   2.  `reactive` 
  - 概述：用于创建一个响应式对象，适合存储多个属性。
  - 用法：直接访问对象的属性，无需使用  `.value` 。
   3.  `toRefs` 
  - 概述：将响应式对象的属性转换为响应式引用，避免解构赋值时失去响应性。
  - 用法：使用  `toRefs`  将响应式对象的属性转为  `ref` 。

  4. 侦听 Hooks
   1.  `watch` 
  - 概述：用于侦听响应式数据的变化。
  - 用法：接受数据源和回调函数，数据变化时调用回调。
   2.  `watchEffect` 
  - 概述：自动追踪在其回调函数中使用的响应式数据。
  - 用法：当依赖的数据变化时，回调函数会重新执行。

  5. 计算属性 Hooks
   1.  `computed` 
  - 概述：用于创建计算属性，基于响应式数据进行计算。
  - 用法：返回一个响应式的计算值。

  总结
  Vue 3 的 Hooks 提供了强大的功能，使得组件的状态管理、生命周期处理和响应式数据操作更加灵活和高效。理解和掌握这些 Hooks 的使用，可以帮助开发者更好地构建和管理 Vue 组件。 

  vue3的hooks的作用和优势
  Vue 3 引入了 Composition API，其中的 Hooks（通常被称为组合式函数）提供了一种新的方式来组织和复用逻辑。以下是 Vue 3 Hooks 的一些主要作用和优势：

  1. **逻辑复用**：通过创建可复用的组合式函数，可以将逻辑从组件中提取出来，便于在多个组件之间共享。

  2. **更好的组织结构**：使用 Hooks，可以将相关的逻辑和状态组合在一起，而不是依赖于组件的选项（如 data、methods、computed 等），使得代码更加清晰和易于维护。

  3. **类型推导**：在 TypeScript 中，使用 Hooks 可以提供更好的类型推导，增强开发体验。

  4. **更灵活的组合**：Hooks 可以在不同的组件中自由组合，使得组件的功能更加强大和灵活。

  5. **简化状态管理**：通过使用 Hooks，可以更容易地管理组件的状态，尤其是在处理复杂逻辑时。

  6. **响应式 API**：Hooks 使用 Vue 3 的响应式 API，使得状态的变化能够自动更新视图。

  总之，Vue 3 的 Hooks 使得开发者能够以更模块化和可维护的方式构建应用程序，提升了代码的复用性和可读性。
-->
<template>
  <h3>1. 修改网站标题</h3>
  <button @click="changeTitle">修改title</button>

  <h3>2. home和about页面的切换</h3>
  <button @click="currentPage = 'home'">home组件</button>
  <button @click="currentPage = 'about'">about组件</button>
  <component :is="currentPage"></component>
  <div class="content"></div>
</template>

<script>
import { ref } from 'vue'
import Home from './views/Home.vue'
import About from './views/About.vue'

import useTitle from './hooks/useTitle'

export default {
  components: {
    Home,
    About,
  },
  setup() {
    const currentPage = ref('home')

    function changeTitle() {
      useTitle('app title')
    }

    return {
      changeTitle,
      currentPage,
    }
  },
}
</script>

<style scoped>
.content {
  width: 3000px;
  height: 1000px;
  background-color: orange;
}
</style>
